<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:if test="${sessionScope['tipo']!=1}">
	<% response.sendRedirect("Inicio.jsp");%>
</c:if>

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>Alquiler de Canchas</title>
<link href="estilo.css" rel="stylesheet"/>
<link href="Css/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script src="js/script0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js"></script>

</head>
<body>

	<script>
		$(function() {
			$.datepicker.regional['es'] = {
				closeText : 'Cerrar',
				prevText : '&#x3c;Ant',
				nextText : 'Sig&#x3e;',
				currentText : 'Hoy',
				monthNames : [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
						'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre',
						'Noviembre', 'Diciembre' ],
				monthNamesShort : [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
						'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
				dayNames : [ 'Domingo', 'Lunes', 'Martes', 'Mi&eacute;rcoles',
						'Jueves', 'Viernes', 'S&aacute;bado' ],
				dayNamesShort : [ 'Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv',
						'Vie', 'S&aacute;b' ],
				dayNamesMin : [ 'Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;' ],
				weekHeader : 'Sm',
				dateFormat : 'yy-mm-dd',
				firstDay : 1,
				isRTL : false,
				showMonthAfterYear : false,
				yearSuffix : ''
			};
			$.datepicker.setDefaults($.datepicker.regional['es']);
			var dates = $("#from, #to")
					.datepicker(
							{
								defaultDate : "+1w",
								changeMonth : true,
								numberOfMonths : 3,
								onSelect : function(selectedDate) {
									var option = this.id == "from" ? "minDate"
											: "maxDate", instance = $(this)
											.data("datepicker"), date = $.datepicker
											.parseDate(
													instance.settings.dateFormat
															|| $.datepicker._defaults.dateFormat,
													selectedDate,
													instance.settings);
									dates.not(this).datepicker("option",
											option, date);
								}
							});

		});
	</script>

	<%@include file="header.jsp"%>

	<div class="art-post-inner art-article">
		<h1 class="art-postheader">FULBITO FACIL</h1>
		<div class="art-postcontent">



			<form name="frmConsulta" method="post" action="ReservaServlet">
				<fieldset>
					<legend> Consulta de Canchas Disponibles </legend>

					<label for="name">Distrito</label> <input class="medio2"
						name="txtDistrito" type="text" required autofocus><label
						for="fec_ini">Fecha inicio</label> <input id="from" class="medio2"
						name="txtFechaIni" type="text" required><label
						for="fec_fin">Fecha final</label> <input id="to" class="medio2"
						name="txtFechaFin" type="text" required>
					<p>
						<label for="hor_ini">Hora inicio</label>
						<input class="peque" name="txtHoraIni" type="text" required>
						<label for="hor_fin">Hora final</label>
						<input class="peque" name="txtHoraFin" type="text" required>
						<input type="submit" value="Consulta">
				</fieldset>
			</form>


			<table id="tblReserva">
				<tr>
					<th>Distrito</th>
					<th>Nombre</th>
					<th>Fecha</th>
					<th>Hora</th>
					<th style="display: none">idHorario</th>
					<th style="display: none">idCanchaFul</th>

				</tr>

				<c:forEach items="${requestScope.Canchas}" var="r" varStatus="i">
					<tr>
						<td class="centro">${r.getDistrito()}</td>
						<td class="centro">${r.getNombre()}</td>
						<td class="centro">${r.getFecha()}</td>
						<td class="centro">${r.getHora()}</td>
						<td style="display: none">${r.getIdHoraAtencion()}</td>
						<td style="display: none">${r.getIdCancha()}</td>
					</tr>
				</c:forEach>
			</table>

		</div>
		<div class="cleared"></div>
	</div>

	<div class="cleared"></div>
	</div>
	</div>

	<div class="art-post">
		<div class="art-post-tl"></div>
		<div class="art-post-tr"></div>
		<div class="art-post-bl"></div>
		<div class="art-post-br"></div>
		<div class="art-post-tc"></div>
		<div class="art-post-bc"></div>
		<div class="art-post-cl"></div>
		<div class="art-post-cr"></div>
		<div class="art-post-cc"></div>
		<div class="art-post-body">
			<div class="art-post-inner art-article">

				<form name="frmReserva" method="post" action="AlquilerServlet">
					<fieldset>
						<legend>Alquilar Cancha</legend>
						<label>Cancha</label>
						<input class="medio2" name="qryDistrito" type="text" value="" required/>
						<label>Fecha</label>
						<input class="medio2" name="qryFecha"  type="text" value="" required/>
						<label>Hora</label>
						<input class="medio2" name="qryHora" type="text" value="" required/>
						<input type="submit" value="Alquilar"/>
						<input name="qryidHora" type="hidden" value=""/>
						<input name="qryidCancha" type="hidden" value="" />
					</fieldset>
				</form>



			</div>
			<div class="cleared"></div>
		</div>

		<%@include file="footer.jsp"%>


		<script>
			document.getElementById("tblReserva").onclick = function(e) {
				// obtenemos el elemento sobre el que se ha hecho click
				if (!e)
					e = window.event;
				if (!e.target)
					e.target = e.srcElement;
				// e.target ahora simboliza la celda en la que hemos hecho click
				// subimos de nivel hasta encontrar un tr
				var TR = e.target;
				while (TR.nodeType == 1 && TR.tagName.toUpperCase() != "TR")
					TR = TR.parentNode;
				var celdas = TR.getElementsByTagName("TD");
				// cogemos la primera celda TD del tr (si existe)			
				// devolvemos su contenido			
				document.frmReserva.qryDistrito.value = celdas[1].innerHTML;
				document.frmReserva.qryFecha.value = celdas[2].innerHTML;
				document.frmReserva.qryHora.value = celdas[3].innerHTML;
				document.frmReserva.qryidHora.value = celdas[4].innerHTML;
				document.frmReserva.qryidCancha.value = celdas[5].innerHTML;
			}
		</script>
</body>
</html>